<template>
  <div class="wrapper">
    <a-space style="display: flex; justify-content: space-between">
      <a-space>
        <a-button @click="getMyWayList"> 我的行程 </a-button>
        <a-button @click="changeHelp"> 紧急求助 </a-button>
        <a-button @click="getHelpHistoryList"> 救助历史 </a-button>
      </a-space>
      <a-space>
        <a-button @click="getNewHelpList" type="primary"> 发起求助 </a-button>
        <a-button @click="openMo" type="primary"> 添加行程 </a-button>
      </a-space>
    </a-space>

    <template v-if="!isHistoryRef">
      <a-table :data="data" style="margin-top: 30px">
        <template #columns>
          <a-table-column title="状态">
            <template #cell="{ record }">
              <!-- {{ record }} -->
              <a-tag v-if="record.state === 1" color="green">已完成</a-tag>
              <a-tag v-else color="red">未完成</a-tag>
            </template>
          </a-table-column>

          <a-table-column title="时间">
            <a-table-column
              title="开始"
              data-index="originTime"
            ></a-table-column>
            <a-table-column
              title="结束"
              data-index="targetTime"
            ></a-table-column>
          </a-table-column>

          <a-table-column title="行程">
            <a-table-column title="起点" data-index="origin"></a-table-column>
            <a-table-column title="终点" data-index="target"></a-table-column>
          </a-table-column>

          <a-table-column title="操作 " data-index="id">
            <template #cell="{ record }">
              <!-- {{ record }} -->
              <template v-if="record.state !== 1">
                <a-button @click="handelFinish(record.id)"> 完成行程 </a-button>
              </template>
              <template v-if="record.isHelp && !record.helpId">
                <a-button type="primary" @click="help(record.id)">
                  救助
                </a-button>
              </template>
            </template>
          </a-table-column>
        </template>
      </a-table></template
    >

    <template v-else>
      <a-table :data="data" style="margin-top: 30px">
        <template #columns>
          <a-table-column title="基本信息">
            <a-table-column title="地点" data-index="location">
            </a-table-column>
            <a-table-column title="时间" data-index="createTime">
            </a-table-column>
          </a-table-column>

          <a-table-column title="人员">
            <a-table-column title="受助者" data-index="userId"></a-table-column>
            <a-table-column title="救助人" data-index="helpId"></a-table-column>
          </a-table-column>
        </template>
      </a-table>
    </template>

    <a-modal v-model:visible="visibleAdd" @ok="handleOk" @cancel="handleCancel">
      <template #title> 添加行程 </template>
      始点:
      <a-input
        v-model="propsAddWay.origin"
        :style="{ width: '320px' }"
        placeholder="输入出发点"
        allow-clear
      />
      <br />
      <br />

      终点:
      <a-input
        v-model="propsAddWay.target"
        :style="{ width: '320px' }"
        placeholder="输入终点"
        allow-clear
      />
      <br />
      <br />
      开始与结束日期：<a-range-picker
        showTime
        @change="onChangeDate"
        @select="onSelectDate"
        style="width: 254px; marginbottom: 20px"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { DatePicker, Space } from "@arco-design/web-react";
import { IconInfoCircle } from "@arco-design/web-react/icon";
import {
  getMyWay,
  addWay,
  finishWay,
  getHelp,
  choosePerson,
  getAllHelp,
  handleHelp,
  getHelpHistory,
  getNewHelp,
} from "@/apis/oldman";
import moment from "moment";
import { Message } from "@arco-design/web-vue";

type addWayT = {
  origin: ""; //(起点)(String)
  target: ""; // （终点）（String）
  originTime: Date | ""; //（起点时间）（datetime）
  targetTime: Date | ""; //（终点时间）(datetime)
};
const propsAddWay = ref<addWayT>({
  origin: "", //(起点)(String)
  target: "", // （终点）（String）
  originTime: "", //（起点时间）（datetime）
  targetTime: "", //（终点时间）(datetime)
});

const isHistoryRef = ref(false);

const data = ref([
  {
    pos1: "1",
    pos2: "2",
    time1: "1",
    time2: "2",
  },
  {
    pos1: "1",
    pos2: "2",
    time1: "1",
    time2: "2",
  },
]);

const getNewHelpList = async () => {
  await getNewHelp();
  await changeHelp();
};

const help = async (id) => {
  isHistoryRef.value = false;
  const res = await handleHelp(id);
  await getMyWayList();
};

const getHelpHistoryList = async () => {
  isHistoryRef.value = true;
  const res = await getHelpHistory();
  data.value = res.data.data;
};

const getMyWayList = () => {
  isHistoryRef.value = false;
  getMyWay().then((res) => {
    data.value = res.data.data;
  });
};

// 添加行程相关
const visibleAdd = ref(false);
const openMo = () => {
  visibleAdd.value = true;
};
const handleOk = () => {
  visibleAdd.value = false;
  addWay(propsAddWay.value).then((res) => {
    getMyWayList();
    propsAddWay.value = {
      origin: "", //(起点)(String)
      target: "", // （终点）（String）
      originTime: "", //（起点时间）（datetime）
      targetTime: "", //（终点时间）(datetime)
    };
  });
};
const handleCancel = () => {
  visibleAdd.value = false;
};
const onChangeDate = (e) => {
  // console.log(e, "onChangeDate");
};
const onSelectDate = (e) => {
  // propsAddWay.value.originTime = new Date(e[0]);
  // propsAddWay.value.targetTime = new Date(e[1]);
  propsAddWay.value.originTime = e[0];
  propsAddWay.value.targetTime = e[1];
  console.log(e, "onChangeDate2");
};

// 完成行程
const handelFinish = async (id) => {
  await finishWay({ id: id });
  await getMyWayList();
};

// 获取救助信息
// const helpListData = ref();
// const getHelpFn = () => {
//   getHelp();
// };

//紧急求助
const changeHelp = () => {
  getHelp().then((res) => {
    Message.success("切换到紧急求助");
    data.value = res.data.data;
  });
};

// 获取全量
const getAllHelpFn = () => {
  getAllHelp();
};

onMounted(() => {
  getMyWayList();
  getAllHelpFn();
});
</script>

<style scoped>
.wrapper {
  padding: 24px;
}
</style>
